

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 网站用户</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
              <input id="edt-search" type="text" placeholder="输入关键字" class="layui-input"/>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
              <i id="btn-search" class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
              <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加一级菜单</button>
            </button>
          </div>
        </div>
      </div>
      
      <div class="layui-card-body">
        <!-- <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table> -->
        <table id="tableMenu" class="layui-table" lay-filter="tableMenu"></table>
        <script type="text/html" id="imgTpl"> 
          <img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }}>
        </script> 
        <!-- 操作列 -->
		<script type="text/html" id="auth-state">
    		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			<a class="layui-btn layui-btn-xs" lay-event="addSon"><i class="layui-icon"></i>子菜单</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
		</script>
      </div>
    </div>
  </div>

  <script src="/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index', //主入口模块
    treetable: 'treetable-lay/treetable'
  }).use(['index', 'useradmin', 'table','treetable'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table
    ,admin = layui.admin
    ,treetable = layui.treetable;
    
    var renderTable = function () {
        layer.load(2);
	    treetable.render({
	        treeColIndex: 1,
	        treeSpid: 0,
	        treeIdName: 'id',
	        treePidName: 'parent_menu',
	        elem: '#tableMenu',
	        url: '/sys/getTreeMenu',
	        method:'post',
	        page: false,
	        cols: [[
	            {type: 'numbers'},
	            {field: 'title', minWidth: 200, title: '菜单名称'},
	            {field: 'title_en', title: '菜单标识'},
	            {field: 'href', title: '菜单url'},
	            {
	                field: 'icon', width: 60, templet: function (d) {
	                        return '<i class="ray '+d.icon+'"></i>';
	                }, title: '图标'
	            },
	            {field: 'seq_num', width: 80, align: 'center', title: '排序号'},
	            {templet: '#auth-state', width: 230, align: 'center', title: '操作'}
	        ]],
	        done: function () {
	            layer.closeAll('loading');
	        }
	    });
    }
    renderTable();
    
    $('#btn-search').click(function () {
        var keyword = $('#edt-search').val();
        var searchCount = 0;
        $('#tableMenu').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
            $(this).css('background-color', 'transparent');
            var text = $(this).text();
            if (keyword != '' && text.indexOf(keyword) >= 0) {
                $(this).css('background-color', 'rgba(250,230,160,0.5)');
                if (searchCount == 0) {
                    treetable.expandAll('#auth-table');
                    $('html,body').stop(true);
                    $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                }
                searchCount++;
            }
        });
        if (keyword == '') {
            layer.msg("请输入搜索内容", {icon: 5});
        } else if (searchCount == 0) {
            layer.msg("没有匹配结果", {icon: 5});
        }
    });
    
    //事件
    var active = {
      batchdel: function(){
        var checkStatus = table.checkStatus('LAY-user-manage')
        ,checkData = checkStatus.data; //得到选中的数据

        if(checkData.length === 0){
          return layer.msg('请选择数据');
        }
        
        layer.prompt({
          formType: 1
          ,title: '敏感操作，请验证口令'
        }, function(value, index){
          layer.close(index);
          
          layer.confirm('确定删除吗？', function(index) {
            
            //执行 Ajax 后重载
            /*
            admin.req({
              url: 'xxx'
              //,……
            });
            */
            table.reload('LAY-user-manage');
            layer.msg('已删除');
          });
        });
      }
      ,add: function(){
        layer.open({
          type: 2
          ,title: '添加一级菜单'
          ,content: '/sys/menuAddOrEdit/0-0'
          ,maxmin: true
          ,area: ['460px', '400px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
            ,submitID = 'LAY-user-front-submit'
            ,submit = layero.find('iframe').contents().find('#'+ submitID);

            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
              var field = data.field; //获取提交的字段
              var mymsg1 = layer.msg('正在添加菜单中，请稍候...', {
    			  icon: 16
    			  ,shade: 0.5
    			  ,time:false
    			});
            admin.req({
			        url: '/sys/doMenuAddOrEdit' //实际使用请改成服务端真实接口
			        ,data: field
			        ,success:function(rsp){
				  		if(rsp.code==0){
				  			layer.msg(rsp.msg, {icon: 1});
				  			layer.close(index);
				  			renderTable(); //数据刷新
					  	}else{
					  		layer.close(mymsg1);
						}
					}
			      });
            });  
            
            submit.trigger('click');
          }
        }); 
      }
    };
    
    table.on('tool(tableMenu)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
        	layer.open({
                type: 2
                ,title: '编辑菜单'
                ,content: '/sys/menuAddOrEdit/'+data.id+'-'+data.parent_menu
                ,maxmin: true
                ,area: ['460px', '400px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                  var iframeWindow = window['layui-layer-iframe'+ index]
                  ,submitID = 'LAY-user-front-submit'
                  ,submit = layero.find('iframe').contents().find('#'+ submitID);

                  //监听提交
                  iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                    var field = data.field; //获取提交的字段
                    var mymsg1 = layer.msg('正在修改菜单中，请稍候...', {
          			  icon: 16
          			  ,shade: 0.5
          			  ,time:false
          			});
                  admin.req({
      			        url: '/sys/doMenuAddOrEdit' //实际使用请改成服务端真实接口
      			        ,data: field
      			        ,success:function(rsp){
      				  		if(rsp.code==0){
      				  			layer.msg(rsp.msg, {icon: 1});
      				  			layer.close(index);
      				  			renderTable(); //数据刷新
      					  	}else{
      					  		layer.close(mymsg1);
      						}
      					}
      			      });
                  });  
                  
                  submit.trigger('click');
                }
              }); 
        } else if(obj.event === 'addSon'){
        	layer.open({
                type: 2
                ,title: '新增子菜单'
                ,content: '/sys/menuAddOrEdit/0-'+data.id+'-1'
                ,maxmin: true
                ,area: ['460px', '400px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                  var iframeWindow = window['layui-layer-iframe'+ index]
                  ,submitID = 'LAY-user-front-submit'
                  ,submit = layero.find('iframe').contents().find('#'+ submitID);

                  //监听提交
                  iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                    var field = data.field; //获取提交的字段
                    var mymsg1 = layer.msg('正在新增菜单中，请稍候...', {
          			  icon: 16
          			  ,shade: 0.5
          			  ,time:false
          			});
                  admin.req({
      			        url: '/sys/doMenuAddOrEdit' //实际使用请改成服务端真实接口
      			        ,data: field
      			        ,success:function(rsp){
      				  		if(rsp.code==0){
      				  			layer.msg(rsp.msg, {icon: 1});
      				  			layer.close(index);
      				  			renderTable(); //数据刷新
      					  	}else{
      					  		layer.close(mymsg1);
      						}
      					}
      			      });
                  });  
                  
                  submit.trigger('click');
                }
              });
        } else if(obj.event === 'del'){
	       	layer.confirm('包括删除当前菜单下的所有子菜单', function(index){
	       		admin.req({
			        url: '/sys/delMenu' //实际使用请改成服务端真实接口
			        ,data: {id:data.id}
			        ,done: function(res){
			          layer.msg(res.msg, {
			            offset: '15px'
			            ,icon: 1
			            ,time: 1000
			          }, function(){
			        	  renderTable(); //数据刷新
		                  layer.close(index); //关闭弹层
			          });
			        }
			      });
	               
             });
        }
      });
    
    $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
  </script>
</body>
</html>
